<template>
    <waterfall :col='col' :lazyDistance="50" :data="data"  @loadmore="loadmore" @scroll="scroll" @finish="finish"  >
            <div class="trend_box" v-for="(item,index) in data" :key="index">
                <div class="topic_head">
                    <a class="person_img">
                        <img :src="item.headimg">
                    </a>
                    <a class="person_info">
                        <h4>{{item.username}}</h4>
                        <p>{{item.workTitle}}</p>
                    </a>
                    <a class="follow">关注</a>
                </div>
                <a class="topic_describe">
                    {{item.photodescribe}}<br>
                    @摄影{{item.photographer}}@模特{{item.modelname}}
                </a>
                <a class="trend_pic mt10">
                    <div class="pic_grid">
                    <img :lazy-src=ServeUrl+pic v-for="(pic,index) in item.roll_img" :key="index"/>
                    </div>
                </a>
                <div class="topic_label">
                    <a v-for="(topic,index) in item.tag" :key="index">{{topic}}</a>
                </div>
                <div class="topic_share">
                    <a class="item">
                        <font-awesome-icon icon="thumbs-up" size="lg" />
                        <span>{{item.thumb}}</span>
                    </a>
                    <a class="item">
                        <i class="el-icon-chat-dot-round" size="lg" />
                        <span>{{item.comments}}</span>
                    </a>
                    <a class="item" @click="deletecollection(item.publish_id)">
                        <i  class="el-icon-star-off" size="lg" />
                        <span>{{item.star}}</span>
                    </a>
                </div>
            </div>

    </waterfall>

</template>

<script>
    export default {
      data(){
          return{
              ServeUrl:this.$store.state.beginUrl,
              data:[],
              col:4,
              gitHubData:{},
              originData:[],
          }
      },
        mounted () {
            let json=window.sessionStorage.getItem("user");
            let userid=JSON.parse(json).uUserid;
            this.$axios.get("/social/collectionSocialbyuid?userid="+userid).then(ret=>{
                ret.data.forEach(data=>{
                    this.originData.push({
                        headimg:this.$store.state.beginUrl+data.userheadimg,
                        publish_id:data.socialPublish.pId,
                        publish_userid:data.socialPublish.pUserid,
                        roll_img:data.sociapPicturePath,
                        username:data.username,
                        workTitle:data.socialPublish.pWorktitle,
                        modelname:data.socialPublish.pModelname,
                        photographer:data.socialPublish.pPhotographer,
                        photodescribe:data.socialPublish.pPhotodescribe,
                        tag:[data.socialPublish.pTag],
                        thumb:data.socialPublish.pLike,
                        comments:data.socialChatCountl,
                        star:data.socialCollectionCount
                    })
                })
            })
            this.data=this.originData
        },
        computed:{

        },
        methods:{
            // 完成元素渲染
            finish(){
                let pic_grid=document.querySelectorAll(".pic_grid")
                for(let i=0;i<pic_grid.length;i++){
                    if(pic_grid[i].children.length==1){
                        pic_grid[i].className += ' pic_1'
                    }
                    if(pic_grid[i].children.length==2){
                        pic_grid[i].className += ' pic_2'
                    }
                    if(pic_grid[i].children.length>2){
                        pic_grid[i].className += ' pic_3'
                    }
                }
            },
            //获取滚动时的event对象
            scroll(data){
                console.log('scroll')
            },
            // 滚动到底部触发
            loadmore(){
                this.$message.error('已经没有更多的帖子了');
            },
            deletecollection(pid){
                 let uid= JSON.parse(window.sessionStorage.getItem("user")).uUserid;
                this.$axios.delete('/social/deletecollection?pid='+pid+'&uid='+uid).then(ret=>{
                    if(ret.data=='deletecollectionsucess'){
                        this.$message.success('取消收藏');
                        location.reload();
                    }else {
                        this.$message.success('取消收藏失败');
                    }
                })
            },
        }
    }

</script>

<style scoped>
    a{
        cursor: pointer;
    }
    .trend_box{
        width: 96%;
        background: white;
        box-sizing:border-box;
        overflow: hidden;
        margin-top: 30px;
        margin-left: 10px;
    }
    .topic_head{
        overflow: hidden;
    }
    .person_img >img{
        border-radius: 30px;
        width:46px;
        height:46px;
        float: left;
    }
    .person_info{
        float: left;
        overflow: hidden;
        width: 260px;
    }
    .person_info h4{
        margin-top: 0px;
        margin-left: 5px;
        display: inline;
    }
    .person_info p{
        margin-top: 0px;
        margin-left: 5px;
        color: #999999;
        font-size: 12px;
        margin-bottom: 0px;
    }
    .follow{
        border: #FF6699 solid 1px;
        color: #FF6699;
        float: right;
        text-align: center;
        width: 67px;
        height: 24px;
        margin-top: 10px;
        margin-right: 20px;
    }
    .topic_describe {
        margin-top: 10px;
        display: block;
    }
    .topic_describe:hover{
        color: #FF6699;
    }

    .trend_pic { display: inline-block; width: 100%; overflow: hidden; }
    .trend_pic .pic_grid { width: 100%; position: relative; display: block; }
    .trend_pic .pic_1 {  }
    .trend_pic .pic_1 img { width: 100%; position: relative; }
    .trend_pic .pic_2, .trend_pic .pic_3 { margin: -2px; }
    .trend_pic .pic_2 img { width: 50%; box-sizing: border-box; border: 2px #ffffff solid; float: left; }
    .trend_pic .pic_3 img { width: 33.3333%; box-sizing: border-box; border: 2px #ffffff solid; float: left; }
    .trend_pic .pic_3 img:first-child { width: 66.6667%; }


    .topic_label{
        margin-top: 10px;
    }
    .topic_label a{
        background: rgba(255, 102, 153,0.2);
        color: #ff6699 ;
        padding: 4px 8px;
        border-radius: 2px;
        float: left;
        margin: 3px 10px 10px 3px;
    }
    .topic_share{
        border-top: 1px #eeeeee solid;
        margin-top: 10px;
        padding-top: 10px;
        display: inline-block;
        width: 100%;
    }
    .item{
        float: left;
        margin-left: 30px;
    }
    .mt10 { margin-top: 10px !important; }
</style>